<template>
  <view class="cu-select-wrap" :class="{ wrap: wrap }">
    <view
      class="cu-select-item"
      v-for="item in list"
      :key="item[value]"
      :class="{ active: active.indexOf(item[value]) > -1 }"
      @click="itemClick(item[value])"
    >
      <image
        class="icon-style"
        v-show="active.indexOf(item[value]) <= -1"
        src="/static/images/work/dbd/selected_no.png"
        mode="aspectFit"
      ></image>
      <image
        class="icon-style"
        v-show="active.indexOf(item[value]) > -1"
        src="/static/images/work/dbd/selected_yes.png"
        mode="aspectFit"
      ></image>
      <text class="content">{{ item[label] }}</text>
    </view>
  </view>
</template>

<script>
// 多选
export default {
  name: 'cu-select',
  props: {
    // 选择的列表 [{lable: 'xxx',value: 1}]
    list: {
      type: Array,
      default: () => []
    },
    label: {
      type: String,
      default: 'lable'
    },
    value: {
      type: String,
      default: 'value'
    },
    wrap: {
      type: Boolean,
      default: false
    },
    active: {
      type: Array,
      default: () => []
    }
  },
  model: {
    prop: 'active',
    event: 'change'
  },
  data() {
    return {}
  },
  methods: {
    itemClick(item) {
      if (this.active.indexOf(item) > -1) {
        this.active.splice(this.active.indexOf(item), 1)
      } else {
        this.active.push(item)
      }
      this.$emit('change', this.active)
    }
  }
}
</script>

<style lang="scss" scoped>
.cu-select-wrap {
  display: flex;
  flex-wrap: wrap;

  &.wrap {
    display: block;
  }

  .cu-select-item {
    display: flex;
    align-items: center;
    color: #333;
    line-height: 36rpx;
    width: 25%;
    height: 60rpx;
    display: flex;
    align-items: center;
    .icon-style {
      width: 36rpx;
      height: 36rpx;
      margin-right: 10rpx;
    }

    .content {
      flex: 1;
    }
  }
}
</style>
